import React, { PureComponent } from 'react';
import router from 'umi/router';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import {
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Card,
  InputNumber,
  Radio,
  Icon,
  Tooltip,
  BackTop, message,
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './BasicForm.less';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

@connect(({ loading }) => ({
  submitting:loading.models.restfulapi,
}))

@Form.create()
class BasicForms extends PureComponent {
  handleSubmit = e => {
    const { dispatch, form } = this.props;

    e.preventDefault();

    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        dispatch({
          type: 'restfulapi/submitBasicForm',
          payload: values,
          callback: (response) => {
            if (response) {
              message.success('提交成功');
            } else {
              message.error('提交失败');
            }
          }
        });
      }
    });
  };

  handleReturnEvt() {
    router.push({
      pathname: '/dev/search-table',
    });
  };

  render() {
    const { submitting } = this.props;
    const {
      form: { getFieldDecorator, getFieldValue },
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderWrapper
        title={<FormattedMessage id="app.forms.basic.title" />}
        content={<FormattedMessage id="app.forms.basic.description" />}
      >
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label='用户名'>
              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '用户名不能为空',
                  },
                ],
              })(<Input placeholder='请输入用户名'/>)}
            </FormItem>
            <FormItem {...formItemLayout} label="类型">
              {getFieldDecorator('type', {
                rules: [
                  {
                    required: true,
                    message: '类型不能为空',
                  },
                ],
              })(
                <Select placeholder="请选择" style={{ width: '50%' }}>
                  <Option value="admin">管理员</Option>
                  <Option value="user">普通用户</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label='性别'>
              <div>
                {getFieldDecorator('sex', {
                  initialValue: '0',
                })(
                  <Radio.Group>
                    <Radio value="1">男</Radio>
                    <Radio value="0">女</Radio>
                  </Radio.Group>
                )}
              </div>
            </FormItem>
            <FormItem {...formItemLayout} label='出生日期'>
              {getFieldDecorator('birthday', {
                rules: [
                  {
                    required: false,
                    message: '出生日期不能为空',
                  },
                ],
              })(
                <DatePicker
                  style={{ width: '50%' }}
                  placeholder='请输入出生日期'/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label='年龄'>
              {getFieldDecorator('age')(
                <InputNumber
                  style={{ width: '50%' }}
                  placeholder='请输入年龄'
                  min={0}
                  max={200}
                />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label='介绍'>
              {getFieldDecorator('goal', {
                rules: [
                  {
                    message: '介绍不能为空',
                  },
                ],
              })(
                <TextArea
                  style={{ minHeight: 32 }}
                  placeholder='请输入介绍'
                  rows={4}
                />
              )}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>提交</Button>
              <Button style={{ marginLeft: 8 }} onClick={()=>this.handleReturnEvt()}>返回</Button>
            </FormItem>
          </Form>
        </Card>
        <BackTop />
      </PageHeaderWrapper>
    );
  }
}

export default BasicForms;
